import LogicFlow, { HtmlNodeModel,HtmlNode, type IHtmlNodeProps, type Model, BaseNodeModel } from "@logicflow/core";
import { createApp,h, type App } from "vue";
import startNode from "../node/startNode.vue";
import endNode from "../node/endNode.vue";
import { MenuEnum } from "@/enum";

const nodeMap = {
    start: startNode,
    end: endNode
}

class CustomGlobalModel extends HtmlNodeModel {
    constructor(data:any,graphModel:any){
        super(data,graphModel)
        this.height = data.properties.height
        this.width = data.properties.width
        this.text.editable = false
    }
    getOutlineStyle(): LogicFlow.OutlineTheme {
        const style = super.getOutlineStyle()
        // style.stroke = "#576a95"
        return style
    }
    // 谁能连我
    getConnectedTargetRules(): Model.ConnectRule[] {
        const rules:Model.ConnectRule[]= super.getConnectedTargetRules()
        const rule:Model.ConnectRule[] = [
            {
                message:"开始节点不能连接结束节点",
                validate: (source: BaseNodeModel, target: BaseNodeModel)=>{
                    if(source.properties.prop == MenuEnum.START && target.properties.prop == MenuEnum.END){
                        return false
                    }
                    return true
                }
            },
            {
                message:'开始节点不允许被连接',
                validate(source: BaseNodeModel, target: BaseNodeModel){
                    if(target.properties.prop == MenuEnum.START) return false
                    return true
                }
            },
            {
                message:'approval,cc可以连接end节点',
                validate: (sourceNode, targetNode) => {
                    if(['approval','copy'].includes(sourceNode.properties.prop) && targetNode.properties.prop === 'end') return true
                    return false
                },
            }
        ]
        rules.push(...rule)
        return rules
    }
    // 我能连谁
    getConnectedSourceRules(): Model.ConnectRule[] {
        const rules = super.getConnectedSourceRules()
        const rule : Model.ConnectRule[] = [
            {
                message:"结束节点不允许连接其他节点",
                validate(source: BaseNodeModel, target: BaseNodeModel){
                    if(source.properties.prop === MenuEnum.END) return false
                    return true
                }
            }
        ]
        rules.push(...rule)
        return rules
    }
}


class CustomGlobalView extends HtmlNode {
    isMounted: boolean
    r:any
    app:App
    constructor(props:IHtmlNodeProps){
        super(props)
        const properties = props.model.getProperties()
        const node = nodeMap[properties.prop]
        this.isMounted = false
        this.r = h(node,{properties})
        this.app = createApp({
            render:()=>this.r
        })
    }
    setHtml(rootEl: SVGForeignObjectElement): void {
        if(!this.isMounted){
            this.isMounted = true
            const nodeContainer = document.createElement('div')
            rootEl.appendChild(nodeContainer)
            this.app.mount(nodeContainer)
        }else{
            this.r.component.props.properties = this.props.model.getProperties()
        }
    }
}


export default {
    type: "customGlobal",
    view: CustomGlobalView,
    model: CustomGlobalModel
}